<template>
  <div class="monitor_page">
    <el-tabs v-model="activeName" type="border-card" @tab-click="clickTab">
      <el-tab-pane label="监测数据" name="监测数据">
        <el-card class="monitor_page-right">
          <div style="width: 28%" class="filter_header">
            <el-form ref="form" label-width="100px">
              <div class="monitor_page-filter">
                <el-form-item label="起止时间：">
                  <el-date-picker
                    v-show="!isToggleStatus"
                    style="width:100%;min-width:280px"
                    size="small"
                    value-format="timestamp"
                    v-model="timerArray"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    :clearable="false"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="monitor_page-filter  filter_select" v-show="!isToggleStatus">
                <el-form-item label="解算类型：">
                  <el-select v-model.trim="EnumSurfaceCalcTypeModel" clearable placeholder="选择时间"
                             style="width: 120px;margin: 0 20px;margin-left: 2px" size="small">
                    <el-option v-for="item in EnumSurfaceCalcTypeList" :key="item.code" :label="item.name"
                               :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
            <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
              <div class="monitor_page-filter-left" v-show="!isToggleStatus">
                <el-button
                  size="small"
                  @click="confirmDelete"
                  icon="el-icon-delete-solid"
                  v-if="hasPermission('monitor:record:del')"
                  type="danger">删除
                </el-button>
                <el-button
                  size="small"
                  plain
                  v-if="hasPermission('monitor:record:mark')"
                  type="primary"
                  @click="showMonitorRemarkDialog">说明
                </el-button>
                <el-button
                  size="small"
                  plain
                  v-if="hasPermission('monitor:record:export')"
                  @click="$emit('export')"
                  icon="el-icon-download"
                  type="primary">数据导出
                </el-button>
              </div>
              <el-button
                size="small"
                type="primary"
                class="common_btn-defalut"
                icon="el-icon-search"
                @click="form.page=1;$emit('update')">搜索
              </el-button>
            </div>
          </div>
          <div>
            <!-- table -->
            <el-table
              v-show="!isToggleStatus"
              :data="tableList"
              border
              @selection-change="handleSelectionChange"
              ref="multipleTable"
              tooltip-effect="dark">
              <el-table-column type="selection" width="28">
              </el-table-column>
              <el-table-column prop="createTime" label="数据采集时间" header-align="center" min-width="140">
                <template slot-scope="scope">
                  {{scope.row.createTime | formatTimer }}
                </template>
              </el-table-column>
              <el-table-column label="变化值(mm)" header-align="center">
                <el-table-column
                  header-align="center"
                  prop="xDisplacement"
                  label="北向标"
                  min-width="80">
                </el-table-column>
                <el-table-column
                  header-align="center"
                  prop="yDisplacement"
                  label="东向标"
                  min-width="80">
                </el-table-column>
                <el-table-column
                  header-align="center"
                  prop="zDisplacement"
                  label="天向标"
                  min-width="80">
                </el-table-column>
                <el-table-column
                  header-align="center"
                  prop="xyDisplacement"
                  label="平面合成"
                  min-width="80">
                </el-table-column>
                <el-table-column
                  header-align="center"
                  prop="xyzDisplacement"
                  label="三维合成"
                  min-width="80">
                </el-table-column>
              </el-table-column>
              <!--              <el-table-column label="变化速率(mm/h)" header-align="center">-->
              <!--                <el-table-column-->
              <!--                  header-align="center"-->
              <!--                  prop="xSpeed"-->
              <!--                  label="X"-->
              <!--                  min-width="80">-->
              <!--                </el-table-column>-->
              <!--                <el-table-column-->
              <!--                  header-align="center"-->
              <!--                  prop="ySpeed"-->
              <!--                  label="Y"-->
              <!--                  min-width="80">-->
              <!--                </el-table-column>-->
              <!--                <el-table-column-->
              <!--                  header-align="center"-->
              <!--                  prop="zSpeed"-->
              <!--                  label="Z"-->
              <!--                  min-width="80">-->
              <!--                </el-table-column>-->
              <!--                <el-table-column-->
              <!--                  header-align="center"-->
              <!--                  prop="xySpeed"-->
              <!--                  label="XY"-->
              <!--                  min-width="80">-->
              <!--                </el-table-column>-->
              <!--                <el-table-column-->
              <!--                  header-align="center"-->
              <!--                  prop="xyzSpeed"-->
              <!--                  label="XYZ"-->
              <!--                  min-width="80">-->
              <!--                </el-table-column>-->
              <!--              </el-table-column>-->
<!--              <el-table-column label="原始值" header-align="center">-->
<!--                <el-table-column-->
<!--                  header-align="center"-->
<!--                  prop="xCoordinate"-->
<!--                  label="X"-->
<!--                  min-width="80">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  header-align="center"-->
<!--                  prop="yCoordinate"-->
<!--                  label="Y"-->
<!--                  min-width="80">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  header-align="center"-->
<!--                  prop="zCoordinate"-->
<!--                  label="Z"-->
<!--                  min-width="80">-->
<!--                </el-table-column>-->
<!--              </el-table-column>-->

            </el-table>
            <!-- 分页器 -->
            <el-pagination
              v-show="!isToggleStatus"
              :disabled="isToggleStatus"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
                 :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total">
            </el-pagination>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="监测绘图" name="监测绘图">
        <el-card class="card_echarts" shadow="hover">
          <echarts-one-change ref="echartsChange"></echarts-one-change>
        </el-card>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="card_echarts" shadow="hover">
              <echarts-two-change ref="echartsTwoChange1"></echarts-two-change>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="card_echarts" shadow="hover">
              <echarts-two-change ref="echartsTwoChange2"></echarts-two-change>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="card_echarts" shadow="hover">
              <echarts-two-change ref="echartsTwoChange3"></echarts-two-change>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
  </div>
</template>

<script>
import ItemMixins from './item.mixins'
import EchartsOneChange from '../monitor-echarts/base/echarts-2-change'
import EchartsTwoChange from '../monitor-echarts/base/echarts-2-trajectory'

export default {
  props: ['surfaceCalcType','enumSurfaceCalcTypeList'],
  mixins: [ItemMixins],
  components: {EchartsOneChange, EchartsTwoChange},

  data() {
    return {
      activeName: '监测数据',
      // 当前的图表钩子
      chartsName: ['echartsChange', 'echartsTwoChange1', 'echartsTwoChange2', 'echartsTwoChange3'],
      // 分页参数
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      isShowDialog: false
    }
  },
  computed: {
    EnumSurfaceCalcTypeList:{
      get() {

        return this.enumSurfaceCalcTypeList;

      },
    },
    EnumSurfaceCalcTypeModel: {
      get() {
        return this.surfaceCalcType;
      },
      set(value) {
        this.$emit("update:surfaceCalcType", value);
      },
    },
    //工点类型是否是建筑物，建筑物不展示边坡相关的信息
    workPointTypeIsBuilding() {
      const {
        workPointId
      } = this.$route.params
      const info = store.workPointList.find(x => x.id === workPointId) || {}
      return info.bianpiType === 6
    }
  },
  methods: {
    setWarningLine() {
    },
    clickTab() {
      if (this.activeName === '监测绘图') {
        this.chartsName.map(name => {
          this.$nextTick(() => {
            this.$refs[name].echartResize()
          })
        })
      }
    },
    // 数据刷新
    update({data, monitorName, monitorInfo}) {
      this.equipId = monitorInfo.bindEquipId

      this.collectionList = data.recordList || []
      this.form.page = 1;
      this.form.total = this.collectionList.length
      this.$refs.echartsChange.updateEchart(data, monitorName, monitorInfo)
      this.$refs.echartsTwoChange1.updateEchart(data.xDisplacement, data.yDisplacement, "水平轨迹图（单位：mm）", "东向", "北向","西向","南向")
      this.$refs.echartsTwoChange2.updateEchart(data.yDisplacement, data.zDisplacement, "沉降东西轨迹图（单位：mm）", "东向", "天向","西向","地向")
      this.$refs.echartsTwoChange3.updateEchart(data.xDisplacement, data.zDisplacement, "沉降南北轨迹图（单位：mm）", "北向", "天向","南向","地向")
    },

  },
  mounted() {

  }
}
</script>

<style scoped="scoped" lang="less">

  @import url('./commom.less');

  .el-tabs {
    width: 100%;
  }

  // 还需自定义的css
  .card_echarts {
    height: 400px;
  }

  .monitor_page-left2 {
    // 15px未margin

  }

  .monitor_page {
    /deep/ .el-tabs__item {
      color: #1990FE;
      font-size: 15px;
    }

    /deep/ .el-tabs__item.is-active {
      background-color: #1990FE;
      color: #ffffff;
      font-size: 18px;
    }

    /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
      font-size: 18px;
    }
  }

  .filter_select {
    .el-select {
      width: 40%;
    }
  }

  .el-card {
    background: transparent;
  }

  .monitor_page /deep/ .el-tabs__item.is-active {
    background: #1990FE !important;
    color: white !important;
  }

  .monitor_page /deep/ .el-tabs__item:hover {
    background: #1990FE !important;
    color: white !important;
  }

  /deep/ .el-tabs__item {
    color: #1990FE !important;
  }
</style>
